<template>
  <div>
    <div class="main">
      <div class="main_tImg">
        <img :src="Information.usericon" alt="" />
      </div>
      <div class="main_title">{{ Information.username }}</div>
    </div>
    <div class="inputer_title">
      <el-form
        :model="Information"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        :hide-required-asterisk="true"
      >
        <el-form-item label="姓  名："  prop="truename">
          <!-- :disabled="disabled" -->
          <el-input v-model="Information.truename" :disabled="xiugai"></el-input>
        </el-form-item>
        <el-form-item label="性  别：" prop="sex">
          <el-radio-group v-model="Information.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="身份证：" prop="identity">
          <el-input v-model="Information.identity"></el-input>
        </el-form-item> -->
        <el-form-item label="电  话：" prop="phone">
          <!-- :disabled="disabled" -->
          <el-input v-model="Information.phone" :disabled="xiugai"></el-input> </el-form-item
        ><el-form-item label="单  位：" prop="company">
          <el-input v-model="Information.company"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="last_but flex_lr_m">
      <el-button
        type="warning"
        round
        style="width: 120px; background-color: orange; border: none"
        @click="sumit('ruleForm')"
        >保存</el-button
      >
      <el-button
        type="warning"
        round
        style="
          width: 120px;
          background-color: white;
          border: orange 1px solid;
          color: orange;
          margin: 20px 0;
        "
        @click="$router.go(-1)"
        >跳过</el-button
      >
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { MessageBox, Toast } from "mint-ui";

export default {
  data() {
    //手机验证
    let checkPhone = (rule, value, callback) => {
      //注意: 自定义验证函数是放在data里的
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        let reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
        if (!reg.test(value)) {
          callback(new Error("请输入正确的手机号"));
        } else {
          this.a = 1;
          callback();
        }
      }
    };
    //身份证验证
    let cardIdNo = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("身份证号不能为空"));
      } else {
        let reg = /((^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$))/;
        if (!reg.test(value)) {
          callback(new Error("请输入正确的身份证号"));
        } else {
          callback();
        }
      }
    };
    return {
      xiugai: false,
      ALLuserinfo: "",
      Information: {
        truename: "",
        sex: "",
        identity: "",
        phone: "",
        company: "",
        department: "",
        userinfo: "",
        state: "",
      },
      video: "",
      //--------
      ruleForm: {
        name: "",
        date2: "",
        resource: "",
      },
      rules: {
        truename: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        // identity: [{ required: true, trigger: "blur", validator: cardIdNo }],
        phone: [
          {
            required: true,
            trigger: "blur",
            validator: checkPhone,
          },
        ],
        company: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
        ],
        department: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
        ],
      },
      disabled: false,
    };
  },
  created() {
    this.video = this.$route.query.row;
    // this.FUstring();
    this.init();
    this.notice();
  },
  methods: {
    init() {
      request({
        url: "/generator/user/front/getinfo",
        method: "get",
      }).then((response) => {
        this.Information = response.user;
        console.log(response.user, "a");
        console.log(response.user.phone, "b");
        console.log(response.user.truename, "c");
        if (response.user.state != 0) {
          this.disabled = true;
        }
        if (response.user.phone != null) {
          this.xiugai = true;
        }
        if (response.user.truename != null) {
          this.xiugai = true;
        }
        console.log(this.Information);
      });
    },
    sumit(formName) {
      console.log("保存", this.Information);

      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = this.Information;
          request({
            url: "/generator/user/front/complete",
            method: "post",
            data: data,
          }).then((response) => {
            console.log(response);
            if (response.msg == "success") {
              this.back();
            }
          });
        } else {
          console.log("error submit!!");
          Toast({
            message: "请完成所有信息填写！",
          });
          return false;
        }
      });
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
    notice() {
      request({
        url: "generator/user/front/notice",
        method: "get",
      }).then((response) => {
        console.log(response);
      });
    },
    // FUstring() {
    //   console.log(this.ALLuserinfo);
    //   const { truename, sex, identity, phone, company, department, usericon } =
    //     this.ALLuserinfo;
    //   this.Information.truename = truename;
    //   this.Information.sex = sex;
    //   this.Information.identity = identity;
    //   this.Information.phone = phone;
    //   this.Information.company = company;
    //   this.Information.department = department;
    //   this.Information.usericon = usericon;
    // },
  },
};
</script>

<style scoped>
.topheader {
  width: 100%;
  background-color: black;
}
.Theadermain {
  height: 48px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  width: 95%;
  margin: 0 auto;
}
.headerimg {
  width: 0.8rem;
  margin-left: 10px;
  transform: rotate(180deg);
}
.allmain {
  padding: 20px;
  /* border: 1px solid red; */
}
.main_tImg {
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.main_tImg img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.main_title {
  font-weight: bold;
  text-align: center;
}
.inputer_title {
  /* border: 1px solid red; */
  padding: 40px 45px 20px 15px;
}
.Pinput {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
}
.inp_ming {
  width: 100px;
  font-weight: bold;
}
.sex_title {
  padding-bottom: 10px;
  display: flex;
}
.sex_titleRAD {
  font-weight: bold;
  width: 75px;
}
.last_but {
  padding: 0 40px 20px;
  text-align: center;
}
</style>